<template>
  <div class="layout-wrap">
    <div class="container">
      <div class="title">
        <div class="text">幸运饰品</div>
        <div class="btn" v-ripple="{ color: '#bdbdbd' }">获得饰品历史</div>
      </div>
      <div class="category-scroll">
        <div class="category-container">
          <div
            class="category-item"
            v-for="(item, index) of category"
            :key="index"
            :class="{ active: activeIndex == index }"
            @click="activeIndex = index"
            v-ripple="{ color: 'rgb(143, 143, 143)' }"
          >
            <img :src="item.imageUrl" />
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="filter-scroll">
        <div class="filter-container">
          <div class="left-side">
            <div class="price-sort">价格从低到高</div>
          </div>
          <div class="right-side">
            <div class="input">
              <i class="icon iconfont icon-meiyuan"></i>
              <input
                type="text"
                placeholder="最低金额"
                v-model.number="minPrice"
                @keydown="handleInput"
              />
            </div>
            <div class="line">~</div>
            <div class="input">
              <i class="icon iconfont icon-meiyuan"></i>
              <input
                type="text"
                placeholder="最大金额"
                v-model.number="maxPrice"
                @keydown="handleInput"
              />
            </div>
            <div class="btn" v-ripple @click="priceFilter">确定</div>
            <div class="search-input">
              <input
                type="text"
                placeholder="按名字搜索"
                v-model.number="keyword"
              />
              <i
                class="icon iconfont icon-sousuo"
                v-ripple
                @click="keywordFilter"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-wrap">
        <GoodsCard
          class="goods-card"
          v-for="(goods, index) of filterGoodsList"
          :key="index"
          :cardData="goods"
        />
      </div>
      <div
        class="load-more"
        :class="{ 'no-more': !hasMore }"
        v-ripple="{ color: '#848492' }"
        @click="loadMore"
      >
        {{ hasMore ? '加载更多' : '没有更多了.....' }}
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import GoodsCard from './components/goods-card.vue'
import LuckyCommodity from 'api/lucky-commodity.js'
const luckyCommodity = new LuckyCommodity()
export default {
  data() {
    return {
      category: [],
      activeIndex: 0,
      minPrice: '',
      maxPrice: '',
      keyword: '',
      goodsList: [],
      filterGoodsList: [],
      page: 1,
      hasMore: true
    }
  },
  async mounted() {
    await this.getCategory()
    this.getCommodityList()
  },
  computed: {
    categoryId() {
      return this.category[this.activeIndex].id
    }
  },
  methods: {
    async getCategory() {
      this.category = await luckyCommodity.getCommodityCategory()
    },
    async getCommodityList() {
      if (!this.hasMore) {
        return
      }
      const res = await luckyCommodity.getCommodityList({ luckId: this.categoryId, page: this.page })
      let newArr = []
      if (this.page == 1) {
        newArr = res.list
      } else {
        newArr = this.goodsList.concat(res.list)
      }
      this.goodsList = newArr
      this.filterGoodsList = newArr
      if (newArr.length >= res.count) this.hasMore = false
    },
    loadMore() {
      this.page++
      this.getCommodityList()
    },
    handleInput(e) {
      let a = e.key.replace(/[^\d]/g, "");
      if (!a && e.keyCode !== 8 && e.keyCode !== 110) e.preventDefault();
    },
    keywordFilter() {
      this.filterGoodsList = this.goodsList.filter(goods => goods.name.includes(this.keyword))
    },
    priceFilter() {
      const minPrice = this.minPrice, maxPrice = this.maxPrice
      this.filterGoodsList = this.goodsList.filter(goods => {
        if (minPrice && maxPrice) return goods.price >= minPrice && goods.price <= maxPrice
        if (minPrice) return goods.price >= minPrice
        if (maxPrice) return goods.price <= maxPrice
        return true
      })
    }
  },
  watch: {
    activeIndex() {
      this.page = 1
      this.hasMore = true
      this.getCommodityList()
    }
  },
  components: {
    GoodsCard
  }
}
</script>


<style lang="less" scoped>
.layout-wrap {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.container {
  padding: 16px;
  box-sizing: border-box;

  @media screen and (max-width: 500px) {
    & {
      padding: 8px;
    }
  }

  .title {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    color: #c3c3e2;
    .text {
      font-size: 20px;
      height: 20px;
      line-height: 20px;
    }
    .btn {
      position: relative;
      padding: 0 22px;
      height: 44px;
      line-height: 44px;
      color: #848492;
      box-shadow: none;
      font-weight: 600;
      font-size: 15px;
      border-radius: 5px;
      background-color: #333542;
    }
  }

  .category-scroll {
    width: 100%;
    overflow-x: auto;
    font-size: 0;

    @media screen and (min-width: 500px) {
      &::-webkit-scrollbar {
        width: 5px;
        height: 4px;
        opacity: 0.5;
        cursor: pointer;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        height: 1px;
        background-color: #797979;
        cursor: pointer;
      }
    }

    .category-container {
      display: inline-flex;
      flex-wrap: nowrap;

      .category-item {
        position: relative;
        padding: 6px 12px;
        height: 120px;
        width: 105px;
        box-sizing: border-box;
        background-color: #24252f;
        color: #5c5b5b;

        border-radius: 5px 5px 0 0;
        img {
          width: 90px;
          height: 68px;
          pointer-events: none;
        }
        .name {
          padding-top: 10px;
          height: 24px;
          line-height: 24px;
          font-size: 14px;
          text-align: center;
          color: #848492;
        }

        &.active {
          background-color: #2b2c37;

          .name {
            color: #e9b10e;
          }
        }
        &:not(:last-child) {
          margin-right: 2px;
        }
      }
    }
  }

  .filter-scroll {
    margin-bottom: 16px;
    width: 100%;
    overflow-x: auto;
    font-size: 0;
    background-color: #2b2c37;
    @media screen and (min-width: 500px) {
      &::-webkit-scrollbar {
        width: 5px;
        height: 4px;
        opacity: 0.5;
        cursor: pointer;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        height: 1px;
        background-color: #797979;
        cursor: pointer;
      }
    }

    .filter-container {
      min-width: 100%;
      display: inline-flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      // height: 78px;
      height: 70px;
      .left-side {
        display: flex;
        .price-sort {
          width: min-content;
          white-space: nowrap;
          margin: 9.6px;
          color: rgb(233, 177, 14);
          display: inline-block;
          font-size: 14px;
          height: 17px;
          line-height: 17px;
          font-weight: 600;
          border-bottom: 0.5px solid transparent;
          transition: border 0.3s;

          &:hover {
            border-bottom: 1px solid rgb(233, 177, 14);
          }
        }
      }

      .right-side {
        flex: 0 0;
        padding-right: 30px;
        display: flex;
        align-items: center;
        height: 38px;

        .input {
          border: 1px solid #848492;
          height: 36px;
          display: flex;
          align-items: center;
          color: #848492;
          border-radius: 5px;

          .icon {
            padding-left: 8px;
            font-size: 14px;
            height: 14px;
            line-height: 14px;
            color: #e9b10e;
          }

          input {
            margin: 0 8px 0 7px;
            font-size: 16px;
            display: inline-block;
            height: 34px;
            width: 74px;
            padding: 6px 0 7px;
            box-sizing: border-box;
            background: none;
            outline: none;
            color: rgb(195, 195, 226);
          }
        }
        .line {
          font-family: Roboto, sans-serif;
          padding: 0 8px;
          height: 18px;
          font-size: 18px;
          line-height: 18px;
          color: #848492;
          font-weight: 500;
        }
        .btn {
          position: relative;
          margin: 0 8px;
          width: 80px;
          height: 38px;
          line-height: 38px;
          font-size: 15px;
          text-align: center;
          color: #848492;
          font-weight: 600;
          border-radius: 5px;
          background-color: #333542;
          transition: all 0.3s;
          &:hover {
            box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
              0px 4px 5px 0px rgba(0, 0, 0, 0.14),
              0px 1px 10px 0px rgba(0, 0, 0, 0.12);
            background-color: #3a3f50;
          }
        }
        .search-input {
          border: 1px solid #848492;
          height: 36px;
          display: flex;
          align-items: center;
          color: #848492;
          border-radius: 5px;

          .icon {
            position: relative;
            padding: 12px;
            font-size: 20px;
            font-weight: 600;
            height: 14px;
            line-height: 14px;
            color: #848492;
          }

          input {
            margin: 0 3px 0 6px;
            font-size: 16px;
            display: inline-block;
            height: 34px;
            width: 130px;
            padding: 6px 0 7px;
            box-sizing: border-box;
            background: none;
            outline: none;
            color: rgb(195, 195, 226);
          }
        }
      }
    }
  }

  .goods-wrap {
    margin: -8px;
    display: flex;
    flex-wrap: wrap;

    .goods-card {
      flex: 0 0 16.666666666666%;
      overflow: hidden;

      @media screen and (max-width: 1200px) {
        & {
          flex: 0 0 20%;
        }
      }

      @media screen and (max-width: 960px) {
        & {
          flex: 0 0 25%;
        }
      }

      @media screen and (max-width: 600px) {
        & {
          flex: 0 0 50%;
        }
      }
    }
  }
  .load-more {
    position: relative;
    display: block;
    margin: 40px auto;
    width: 184px;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #848492;
    border-radius: 5px;
    &:hover {
      background-color: rgba(195, 195, 226, 0.04);
    }

    &.no-more:hover {
      background: none;
    }
  }
}
</style>
